<template>
  <a-drawer
    width="98%"
    :maskClosable="false"
    :visible="visible"
    :bodyStyle="{ padding: '1px' }"
    :title="title"
    @close="cancel"
  >
    <div class="eip-drawer-body" style="padding: 10px; overflow: hidden">
      <a-spin :spinning="spinning">
        <a-steps :current="current" @change="onChange">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
        <div class="steps-content margin-top">
          <div v-show="current == 0">
            <a-form-model
              ref="form"
              :model="form"
              :rules="rules"
              :label-col="config.labelCol"
              :wrapper-col="config.wrapperCol"
            >
              <a-form-model-item label="名称" prop="name">
                <a-input
                  v-model="form.name"
                  placeholder="请输入名称"
                  allow-clear
                />
              </a-form-model-item>
              <a-form-model-item label="归属分类" prop="unitTypeId">
                <a-select
                  placeholder="请选择归属分类"
                  allow-clear
                  v-model="form.unitTypeId"
                  show-search
                  :filter-option="filterOption"
                >
                  <a-select-option v-for="t in type" :key="t.unitTypeId">
                    {{ t.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="刷新">
                <a-switch v-model="form.isRefresh" />
              </a-form-model-item>
              <a-form-model-item v-if="form.isRefresh" label="刷新间隔时间(秒)">
                <a-input-number
                  style="width: 100%"
                  v-model="form.refreshTime"
                  placeholder="请输入刷新间隔时间(秒)"
                  allow-clear
                />
              </a-form-model-item>
              <a-form-model-item label="需登录">
                <a-switch v-model="form.isLogin" />
              </a-form-model-item>
              <a-form-model-item label="排序号" prop="orderNo">
                <a-input-number
                  id="orderNo"
                  style="width: 100%"
                  placeholder="请输入排序号"
                  v-model="form.orderNo"
                  :min="0"
                  :max="999"
                />
              </a-form-model-item>
              <a-form-model-item label="备注" prop="remark">
                <a-input
                  allow-clear
                  v-model="form.remark"
                  type="textarea"
                  placeholder="请输入备注"
                />
              </a-form-model-item>
            </a-form-model>
          </div>

          <div v-show="current == 1">
            <div class="eip-echarts-container-all" :style="{ height: height }">
              <div class="eip-echarts-container-left">
                <div class="eip-echarts-container-chart-select beauty-scroll">
                  <div class="list-group margin-top-xs">
                    <!-- <button title="全部" echarts-type="all" type="button"
                      class="eip-list-group-item eip-echarts-container-chart-select-btn  eip-echarts-btn-active">
                      全部
                    </button> -->
                    <button
                      :title="item.title"
                      @click="typeClick(item)"
                      type="button"
                      v-for="(item, index) in types"
                      :key="item.type"
                      class="eip-list-group-item eip-echarts-container-chart-select-btn"
                      :class="{
                        'eip-echarts-btn-active': item.type == clickType,
                      }"
                    >
                      {{ item.title }}
                    </button>
                  </div>
                </div>

                <div
                  class="eip-echarts-container-left-chart panel panel-default m-b-none"
                >
                  <div
                    class="panel-body h-full eip-echarts-display-panel beauty-scroll"
                  >
                    <div
                      @click="typesDetailClick(item)"
                      v-for="(item, index) in typesDetailFilter"
                      :key="item.type"
                      :title="item.title"
                      echarts-type="line"
                      echarts-ascription="line"
                      class="col-xs-3 eip-echarts-listing eip-echarts-outer-layer-v2"
                    >
                      <div class="cs-a eip-echarts-inner-layer">
                        <div class="eip-echarts-basic-associator">
                          <img
                            :class="{ active: item.type == form.type }"
                            class="eip-echarts-nav-img eip-echarts-img"
                            :alt="item.title"
                            :src="item.img"
                          />
                          <p class="eip-echarts-img-nameblock">
                            {{ item.title }}
                          </p>
                        </div>
                      </div>
                    </div>
                    <eip-empty
                      style="margin-top: 30px"
                      v-if="typesDetailFilter.length == 0"
                    ></eip-empty>
                  </div>
                </div>
              </div>
              <div class="eip-echarts-container-right">
                <div
                  class="eip-echarts-container-right-top panel panel-default m-b-none"
                >
                  <div class="panel-body h-full">
                    <div
                      style="height: 100%; position: relative"
                      class="eip-echarts-container-right-top-showpanel"
                      id="eip-echarts"
                    >
                      <div class="pos-rlt w-full h-full">
                        <div class="w-full h-full">
                          <div
                            id="eip-echarts-start"
                            class="vertical-center-top text-center"
                          >
                            <span>
                              <img
                                src="/images/report/analyze.png"
                                style="width: 140px; margin-bottom: 20px"
                                alt="预览效果"
                              />
                              <p class="start-p">选择左侧图形预览效果!</p>
                            </span>
                          </div>
                          <div
                            id="eip-echarts-container"
                            class="eip-echarts-container"
                          >
                            <div class="panel-body h-full">
                              <div
                                style="height: 100%; position: relative"
                                class="eip-echarts-container-right-top-showpanel"
                              >
                                <div class="pos-rlt w-full h-full">
                                  <div class="w-full h-full">
                                    <div
                                      id="eip-echarts-start"
                                      v-if="form.type == ''"
                                      class="vertical-center-top text-center"
                                    >
                                      <span>
                                        <img
                                          src="/images/report/analyze.png"
                                          style="
                                            width: 140px;
                                            margin-bottom: 20px;
                                          "
                                          alt="预览效果"
                                        />
                                        <p class="start-p">
                                          选择左侧图形预览效果!
                                        </p>
                                      </span>
                                    </div>
                                    <div
                                      id="eip-echarts-container"
                                      class="eip-echarts-container"
                                    ></div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div v-if="current == 2">
            <a-form-model
              :label-col="config.labelCol"
              :wrapper-col="config.wrapperCol"
            >
              <a-form-model-item
                label="Legend"
                help="数据格式:[{'name':'a'},{'name':'b'}]"
              >
                <a-select
                  placeholder="请选择Legend"
                  allow-clear
                  v-model="data.legend"
                  show-search
                >
                  <a-select-option
                    v-for="t in datasource"
                    :key="t.dataSourceId"
                  >
                    {{ t.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item
                label="x轴"
                help="数据格式:[{'name':'a'},{'name':'b'}]"
              >
                <a-select
                  placeholder="请选择x轴"
                  allow-clear
                  v-model="data.x"
                  show-search
                >
                  <a-select-option
                    v-for="t in datasource"
                    :key="t.dataSourceId"
                  >
                    {{ t.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="x轴颜色">
                <code slot="help">
                  数据由逗号分隔,例如:星期一,星期二 '#669523','#321456'
                </code>
                <a-input
                  v-model="data.xAxiscolor"
                  placeholder="请输入名称"
                  allow-clear
                />
              </a-form-model-item>
              <a-form-model-item label="数据源">
                <code slot="help">
                  数据格式: [
                  <br />{ "legend":"图例1", "name": "邮件营销", "value": 200 },
                  <br />{ "legend":"图例1", "name": "联盟广告", "value": 200 }
                  <br />
                  ]
                </code>
                <a-select
                  placeholder="请选择数据源"
                  allow-clear
                  v-model="data.value"
                  show-search
                >
                  <a-select-option
                    v-for="t in datasource"
                    :key="t.dataSourceId"
                  >
                    {{ t.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-form-model>
          </div>

          <div v-if="current == 3">
            <bar
              :key="key"
              v-if="form.type == 'bar'"
              :dataSource="data"
              @change="optionChange"
            ></bar>
            <lines
              :key="key"
              v-if="form.type == 'line'"
              :dataSource="data"
              @change="optionChange"
            ></lines>
            <pie
              :key="key"
              v-if="form.type == 'pie'"
              :dataSource="data"
              @change="optionChange"
            ></pie>
          </div>
        </div>
      </a-spin>
    </div>
    <div class="eip-drawer-toolbar">
      <a-space>
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
          <a-icon type="step-backward"></a-icon> 上一步
        </a-button>
        <a-button
          v-if="current < steps.length - 1"
          type="primary"
          @click="next"
        >
          <a-icon type="step-forward"></a-icon> 下一步
        </a-button>
        <a-button key="submit" @click="sumbit" type="primary" :loading="loading"
          ><a-icon type="save" />保存</a-button
        >
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import { save, findById, dataSource } from "@/services/system/report/unit/edit";
import { query } from "@/services/system/report/unittype/list";
import { newGuid } from "@/utils/util";
import Vue from "vue";
import { request } from "@/utils/request";
import "./designer.css";
import bar from "./components/bar";
import lines from "./components/line";
import pie from "./components/pie";
export default {
  name: "edit",
  data() {
    return {
      height: this.eipTableHeight() - 96 + "px",
      config: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
      },
      current: 0,
      steps: [
        {
          title: "基础参数设置",
        },
        {
          title: "展示方式",
        },
        {
          title: "数据源配置",
        },
        {
          title: "图形配置",
        },
      ],

      type: [],

      form: {
        typeId: newGuid(),
        unitTypeId: undefined,
        name: null,
        orderNo: 1,
        isRefresh: false,
        refreshTime: 0,
        isLogin: false,
        remark: null,
        type: null,
      },

      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        unitTypeId: [
          {
            required: true,
            message: "请选择分类",
            trigger: "blur",
          },
        ],
      },

      loading: false,
      spinning: false,

      clickType: "all",
      types: [
        { title: "所有", type: "all" },
        { title: "条形图", type: "bar" },
        { title: "仪表盘", type: "gauge" },
        { title: "折线图", type: "line" },
        { title: "饼图", type: "pie" },
        { title: "雷达", type: "radar" },
        { title: "关系图", type: "graph" },
        { title: "树图", type: "tree" },
        { title: "桑基图", type: "sankey" },
        { title: "主题河流图", type: "themeriver" },
        { title: "地图", type: "map" },
        { title: "列表", type: "grid" },
        { title: "数字", type: "number" },
        { title: "富文本", type: "html" },
        { title: "内联框架", type: "iframe" },
        { title: "3D 柱状图", type: "3dbar" },
      ],

      typesDetail: [
        { title: "折线图", type: "line", img: "/images/report/14.png" },
        { title: "柱图", type: "bar", img: "/images/report/3.png" },
        { title: "环形图", type: "pie", img: "/images/report/41.png" },
        { title: "仪表盘", type: "gauge", img: "/images/report/994.png" },
        { title: "雷达", type: "radar", img: "/images/report/57.png" },
        { title: "树图", type: "tree", img: "/images/report/1078.png" },
        { title: "桑基图", type: "sankey", img: "/images/report/40.png" },
        { title: "漏斗图", type: "funnel", img: "/images/report/33.png" },
        {
          title: "主题河流图",
          type: "themeriver",
          img: "/images/report/65.png",
        },
        { title: "地图", type: "map", img: "/images/report/65.png" },
        { title: "列表", type: "grid", img: "/images/report/58.png" },
        { title: "数字", type: "number", img: "/images/report/70.png" },
        { title: "富文本", type: "html", img: "/images/report/83.png" },
        { title: "内联框架", type: "iframe", img: "/images/report/70.png" },
        { title: "3D 柱状图", type: "3dbar", img: "/images/report/77.png" },
      ],

      echarts: null,

      datasource: [],

      data: {
        legend: undefined,
        x: undefined,
        xAxiscolor: null,
        value: undefined,

        option: null,
      },

      key: null,
    };
  },
  components: { bar, lines, pie },
  computed: {
    /**
     *
     */
    typesDetailFilter() {
      var arr = [];
      this.typesDetail.forEach((item) => arr.push(item));
      if (this.clickType != "all") {
        arr = arr.filter((item) => item.type == this.clickType);
      }
      return arr;
    },
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    unitId: {
      type: String,
    },
    title: {
      type: String,
    },
    copy: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.find();
  },
  methods: {
    /**
     *
     */
    initEchart() {
      if (!this.$echarts) {
        Vue.prototype.$echarts = window.echarts;
      }

      this.echarts = this.$echarts.init(
        document.getElementById("eip-echarts-container")
      );
    },

    /**
     * 属性改变
     * @param {*} option
     */
    optionChange(option) {
      this.data.option = option;
    },

    /**
     * 类型切换
     */
    typeClick(item) {
      this.clickType = item.type;
    },

    /**
     * 类型明细点击
     * @param {*} item
     */
    typesDetailClick(item) {
      let that = this;
      this.form.type = item.type;
      //切换右侧数据
      request(
        "/report/unit/configs/" +
          item.type +
          ".json?time=" +
          new Date().getTime(),
        {
          time: new Date().getTime(),
        }
      )
        .then(function (option) {
          if (item.type == "number") {
          } else if (item.type == "html" || item.type == "iframe") {
          } else if (item.type == "map") {
          } else {
            that.initEchart();
            that.echarts.setOption(option, true);
          }
        })
        .catch(function (error) {
          that.$message.error("解析错误,请稍后重试");
        });
    },

    /**
     *
     * @param {搜索} input
     * @param {*} option
     */
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    /**
     *
     * @param {*} current
     */
    onChange(current) {
      this.current = current;
    },

    /**
     * 下一步
     */
    next() {
      this.current++;
      if (this.form.type && this.current == 1) {
        this.typesDetailClick({
          type: this.form.type,
        });
      }
      this.key = Date.now();
    },

    /**
     *
     */
    prev() {
      this.current--;
    },

    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 保存
     */
    sumbit() {
      let that = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.loading = true;
          that.$loading.show({ text: that.eipMsg.saveLoading });
          that.form.unitId = that.copy ? newGuid() : that.form.unitId;
          that.form.config = JSON.stringify(that.data);
          save(that.form).then(function (result) {
            if (result.code === that.eipResultCode.success) {
              that.$message.success(result.msg);
              that.$emit("ok", result);
            } else {
              that.$message.error(result.msg);
            }
            that.loading = false;
            that.$loading.hide();
          });
        } else {
          return false;
        }
      });
    },

    /**
     * 初始化类型
     */
    async initType() {
      var result = await query({
        current: 1,
        size: 999,
      });
      if (result.code === this.eipResultCode.success) {
        this.type = result.data;
      }
    },

    /**
     * 初始化类型
     */
    async initDataSource() {
      var result = await dataSource({
        current: 1,
        size: 999,
      });
      if (result.code === this.eipResultCode.success) {
        this.datasource = result.data;
      }
    },

    /**
     * 根据Id查找
     */
    async find() {
      let that = this;
      await this.initType();
      await this.initDataSource();

      if (this.unitId) {
        that.spinning = true;
        findById(this.unitId).then(function (result) {
          if (result.code === that.eipResultCode.success) {
            that.form = result.data;
            that.clickType = result.data.type;
            if (result.data.config) {
              that.data = JSON.parse(result.data.config);
            }
          } else {
            that.$message.error(result.msg);
          }
          that.spinning = false;
        });
      }
    },
  },
};
</script>